<template>
	<view style="overflow: hidden;">
		<!-- 上传图片 -->
		<uploud-images @upload="upload" @del='delImage' :image="img"></uploud-images>
		<!-- 多行输入框 -->
		<view class="uni-textarea">
			<textarea v-model="text" :maxlength="200" placeholder="描述一下你的神作吧..." />
			<view class="limit">200</view>
		</view>
		<view class="tag-wrapper">
			<view class="hd u-f-ac u-f-jsb">
				<image src="https://assets-cdn.lanqb.com/hyxq/xcxu/tag.png" mode="widthFix"/>
				<view>添加标签</view>
				<text>(添加标签更容易被推荐哦)</text>
			</view>
			<view class="bd">
				<input @confirm="addSelfTag" placeholder-style="color: #B3B3B3;" type="text" placeholder="请输入自定义标签" v-model="selfTagVal" />
			</view>
			<view class="ft">
				<block :key="tag" v-for="tag,tagIndex in tags">
					<text @tap="changeSelectedTag(tagIndex)" :class="{
						'selected': tag.isSelected
					}" class="tag">{{tag.text}}</text>
				</block>
			</view>
		</view>
		
		<!-- 弹出公告 -->
		<uni-popup :show="showpopup" position="middle" mode="fixed" @hidePopup="hidePopup">
			<view class="gonggao">
				<view class="u-f-ajc">
					<!-- <image src="../../static/common/addinput.png" mode="widthFix"></image> -->
				</view>
				<view>1.涉及黄色，政治，广告及骚扰信息</view>
				<view>2.涉及黄色，政治，广告及骚扰信息</view>
				<view>3.涉及黄色，政治，广告及骚扰信息</view>
				<view>4.涉及黄色，政治，广告及骚扰信息</view>
				<button type="default" @tap="hidePopup">朕知道了</button>
			</view>
		</uni-popup>
		
		<!-- 底部 -->
		<view class="addinput-foot u-f-ajc">
			<view v-show="canPublish" @tap="submit" class="addinput-foot-btn active">
				发布
			</view>
			<view v-show="!canPublish" class="addinput-foot-btn">
				发布
			</view>
			
		</view>
		
	</view>
</template>

<script>
	let changelook= ['仅自己可见','所有人可见'];
	import uploudImages from "@/components/common/uploud-images.vue";
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		components:{
			uploudImages,
			uniPopup
		},
		data() {
			return {
				selfTagVal: '',
				isget:false,
				showpopup:true,
				yinsi:1,
				text:"",
				img:'',
				imgId:'',
				selectedTags:[],
				postclass:{
					id:0,     // 当前选中分类id
					title:"", // 当前选中分类名称
					range:[], // 可选项
					list:[]   // 服务端获取到的分类列表
				},
				topic:{
					id:0,	  // 当前选中话题id
					title:""  // 当前选中话题名称
				},
				tags: [
					{
						text: '日系',
						isSelected: false,
					},{
						text: '日系',
						isSelected: false,
					},{
						text: '日系',
						isSelected: false,
					},{
						text: '日系',
						isSelected: false,
					},{
						text: '日系',
						isSelected: false,
					},{
						text: '日系',
						isSelected: false,
					},{
						text: '超酷炫的小彩旗',
						isSelected: false,
					}
					
				]
			};
		},
		onBackPress() {
			// 如果有值
			if(!this.text && this.img.length<1) return;
			if(!this.isget){
				this.baocun();
				return true;
			}
		},
		computed:{
			canPublish(){
				return this.img ? true : false;
			}
		},
		onLoad(e) {
			// 读取缓存
			let res = uni.getStorageSync('addinput');
			if (res) {
				res = JSON.parse(res);
				this.yinsi = res.yinsi;
				this.imglistIds = res.imglistIds || [];
				if (this.imglistIds.length) {
					this.imglist = res.imglist;
				}
				this.text = res.text;
				if (res.postclass) {
					this.postclass = res.postclass;
				}
				if (res.topic) {
					this.topic = res.topic;
				}
			}
			// 获取文章分类
			let postclass = e.postclass ? JSON.parse(e.postclass) : false;
			this.getPostClass(postclass);
			// 监听所属话题选择
			uni.$on('changeTopic',(data)=>{
				this.topic.id = data.id;
				this.topic.title = `#${data.title}#`;
			})
		},
		methods:{
			changeTopic(){
				uni.navigateTo({
					url:"topic-nav/topic-nav?ischange="+true,
				});
			},
			changeSelectedTag(tagIndex){
				this.tags[tagIndex].isSelected = !this.tags[tagIndex].isSelected;
				if(this.tags[tagIndex].isSelected){
					this.selectedTags.push(this.tags[tagIndex].text)
				}
			},
			addSelfTag(e){
				let newTag = {
					text: e.detail.value,
					isSelected : true
				}
				this.selfTagVal = '';
				this.tags.push(newTag)
				// api 新增自定义tag
			},
			async getPostClass(postclass){
				if (postclass) {
					this.postclass.list = postclass;
					let arr = [];
					for (let i = 0; i < postclass.length; i++) {
						arr.push(postclass[i].name)
					}
					return this.postclass.range = arr;
				}
				try{
					let [err,res] = await this.$http.get('/postclass');
					if (!this.$http.errorCheck(err,res)) return;
					let list = res.data.data.list;
					let arr = [] , arr2 = [];
					for (let i = 0; i < list.length; i++) {
						arr.push(list[i].classname);
						arr2.push({
							id:list[i].id,
							name:list[i].classname
						})
					}
					this.postclass.range = arr;
					this.postclass.list = arr2;
				}catch(e){
					return;
				}
			},
			changePostClass(e){
				console.log(e)
				// 当前选中的id
				this.postclass.id = this.postclass.list[e.target.value].id;
				// 当前选中的名称
				this.postclass.title = this.postclass.list[e.target.value].name;
				console.log(this.postclass.list[e.target.value])
			},
			// 保存为草稿
			baocun(){
				uni.showModal({
					content: '是否要保存为草稿？',
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						if(res.confirm){
							// 本地存储
							let obj = {
								yinsi:this.yinsi,
								text:this.text,
								img:this.img,
								imgId:this.imgId,
								postclass:this.postclass,
								topic:this.topic
							};
							uni.setStorageSync('addinput',JSON.stringify(obj))
						}else{
							uni.removeStorage({ key:"addinput" }) // 清除缓存
						}
						this.isget=true;
						uni.navigateBack({
							delta: 1
						});
					},
				});
			},
			// 返回
			back(){
				uni.navigateBack({ delta: 1 });
			},
			// 发布
			async submit(){
				uni.showLoading({ title: '发布中...', mask: true });
				setTimeout(function() {
					// 发布成功
					uni.hideLoading();
					uni.navigateTo({
						url: `work/add_work/add_work_success?img=${this.img}`
					})
					
					
				}, 1000);
				// api 发布作品接口
				// try{
				// 	let [err,res] = await this.$http.post('/post/create',{
				// 		imglist:JSON.stringify(this.imglistIds),
				// 		text:this.text,
				// 		isopen:this.yinsi,
				// 		topic_id:this.topic.id,
				// 		post_class_id:this.postclass.id
				// 	},{
				// 		token:true,
				// 		checkToken:true,
				// 		checkAuth:true
				// 	});
				// 	// 发布失败
				// 	if (!this.$http.errorCheck(err,res)) {
				// 		return uni.hideLoading();
				// 	}
				// 	// 发布成功
				// 	uni.hideLoading();
				// 	uni.showToast({
				// 		title: '发布成功！'
				// 	});
				// 	this.isget = true;
				// 	uni.$emit('updateData',{ 
				// 		type:"updateList",
				// 		data:res.data.data.detail
				// 	});
				// 	uni.navigateBack({ delta: 1 });
					
				// }catch(e){
				// 	return;
				// }
			},
			// 隐私
			changelook(){
				uni.showActionSheet({
					itemList:changelook,
					success: (res)=> {
						this.yinsi = res.tapIndex
					}
				});
			},
			upload(item){
				console.log(item.url)
				this.img = item.url;
				this.imglistId = item.id;
			},
			delImage(index){
				this.img = '';
			},
			hidePopup(){
				this.showpopup=false;
			}
		}
	}
</script>

<style lang="scss">
.uni-textarea{
	padding: 0upx 32upx;
	font-size:32upx;
	font-weight:400;
	color:rgba(179,179,179,1);
	height: 232upx;
	line-height: 1.5;
	>.limit {
		line-height: 59upx;
		font-size:26upx;
		font-weight:400;
		color:rgba(140,140,140,1);
		text-align: right;
		width: 680rpx;
	}
	textarea {
		padding: 13rpx 5upx 0;
		height: 180upx;
		width: 680rpx;

	}
}

.tag-wrapper {
	padding: 13upx 32upx;
	>.hd {
		padding-right: 150upx;
		color: $b1;
		>image {
			width: 35upx;
		}
		>text {
			color: $c2;
		}
	}
	>.bd {
		position: relative;
		margin-top: 46upx;
		color: #B3B3B3;
		input: {
			padding: 13rpx 5upx 0;
			
			font-size: 32upx;
		}
		&::after {
			left: 32rpx;
			width: 686rpx;
			position: absolute;
			z-index: 10;
			right: 0;
			bottom: -10upx;
			left: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(.5);
			-ms-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;

		}
		
	}
	>.ft {
		>text {
			display: inline-block;
			margin-top: 40upx;
			margin-right: 20upx;
			background:rgba(241,241,241,1);
			border-radius:34upx;
			padding: 15upx 27upx;
			&.selected {
				background-color: rgba(249,249,249,1);
				color:rgba(179,179,179,1);
			}
		}
	}
}

.gonggao{
	width: 500upx;
}
.gonggao image{
	width: 75%;
	margin-bottom: 20upx;
}
.gonggao button{
	margin-top: 20upx;
	background: #FFE934;
	color: #171606;
}
.addinput-foot{
	background: #FFFFFF;
	text-align: center;
	position: fixed;bottom: 0;left: 0;right: 0;height: 98upx;box-shadow:0px -2px 15px 0px rgba(0,0,0,0.04);
}
.addinput-foot-btn{
	background: #DCDCDC;
	line-height: 75upx;
	width: 686upx;
	border-radius:36upx;
	color: #fff;
	&.active {
		background-color: $a1;
	}
}
</style>
